.oban-form(
  @color: #333;
  @copyColor: lighten(@color, 30);
  @requiredColor: #cf5f5f;

  @headerSize: 1.5em;
  @labelSize: .95em;
  @copySize: .80em;
  @mainCopySize: .9em;
  @inputFontSize: 1em;

  @labelFontWeight: bold;

  @inputWidth: 80%;
  @inputBorder: lighten(#000, 60);
  @inputBg: #fcfcfc;
  @inputBorderRadius: 3px;

  @spacingHeadline: 15px;
  @spacingSections: 25px;
  @spacingFields: 10px;
  @spacingLabels: 3px;
) {

  color: @color;

  //headline
  fieldset > p {
    font-size: @headerSize;
    margin: 0 0 @spacingHeadline 0;
  }

  //note under headline
  div + p,
  p + p {
    font-size: @mainCopySize;
    margin: 0;
  }

  div > p,
  p + p {
    color: @copyColor;
  }

  //section
  fieldset {
    border: 0;
    margin: 0;
    padding: 0;

    //sections on top of eachother
    & + fieldset {
      margin-top: @spacingSections;
    }
  }

  //field group
  fieldset > div {
    margin: @spacingFields 0;

    //field label
    label {
      margin: 0 0 @spacingLabels 0;
    }

    //field note
    & > p {
      font-size: @copySize;
      margin-top: @spacingLabels;
    }
  }

  //nested headline
  div + p,
  label {
    display: block;
    font-size: @labelSize;
    font-weight: @labelFontWeight;
    margin: 0;
  }

  label {
    span {
      color: @requiredColor;
    }
  }

  div + p + div {
    margin-top: @spacingLabels;
  }

  input[type=checkbox] + label,
  input[type=radio] + label {
    display: inline;
    font-weight: normal;
  }

  fieldset > div { 
    & > input[type=text],
    & > input[type=password],
    & > input[type=email],
    & > input[type=url],
    & > textarea {
      font-size: @inputFontSize;
      border: 1px solid @inputBorder;
      border-radius: @inputBorderRadius;
      background: @inputBg;
      padding: 5px;
      margin: 0;
    }

    & > input[type=text],
    & > input[type=password],
    & > input[type=email],
    & > input[type=url],
    & > textarea,
    & > select {
      width: @inputWidth;
      display: block;
    }
  }


}
